<template>
  <div class="c-cell-group">
    <u-gap height="10" bgColor="#f5f5f5" v-if="showGap"></u-gap>
    <u-cell-group :border="false">
      <u-cell :customStyle="cellStyle" v-if="showHeader">
        <template slot="title">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </template>
      </u-cell>
      <u-cell
        :isLink="isLink"
        :customStyle="cellStyle"
        :border="false"
        @click="$emit('click', $event)"
      >
        <template slot="title">
          <slot name="body"></slot>
        </template>
      </u-cell>
    </u-cell-group>
  </div>
</template>

<script>
export default {
  props: {
    isLink: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showGap: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      cellStyle: {
        paddingLeft: '30rpx'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-cell-group {
  background: #fff;
}
</style>
